<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="keywordQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>


    <el-table :data="searchMasterMsgs" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="title" label="消息标题" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="name" label="宠物名称" width="120">
      </el-table-column>
      <el-table-column prop="age" label="宠物年龄" width="120" sortable>
      </el-table-column>
      <!-- 性别 -->
      <el-table-column label="宠物性别" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.state" style="color: blueviolet">公</span>
          <span v-else style="color: deeppink">母</span>
        </template>
      </el-table-column>
      <el-table-column prop="coatColor" label="宠物毛色" width="120">
      </el-table-column>
      <el-table-column prop="price" label="宠物价格" width="120" sortable>
      </el-table-column>
      <el-table-column prop="typeName" label="宠物品种" width="120" sortable>
      </el-table-column>
      <el-table-column prop="userName" label="所属用户" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <el-button size="small" @click="auditSearchMasterMsg(scope.$index, scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="handlePatchDel" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-size="pageSize" :total="totals" style="float:right;">
      </el-pagination>
    </el-col>

    <!-- 消息审核界面 -->
    <el-dialog title="消息审核" :visible.sync="searchMasterMsgAuditVisible" :close-on-click-modal="false">
      <el-form :model="auditForm" label-width="80px" :rules="auditFormRules" ref="auditForm">
        <el-form-item label="审核备注" prop="note">
          <el-input v-model="auditForm.note" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-radio-group v-model="auditForm.state">
            <el-radio class="radio" :label="1">审核通过</el-radio>
            <el-radio class="radio" :label="0">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="searchMasterMsgAuditVisible = false">取消</el-button>
        <el-button type="primary" @click.native="auditSubmit">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
export default {
  data() {
    return {
      //分页显示所属数据
      searchMasterMsgs: [],
      listLoading: false,
      currentPage: 1,
      pageSize: 5,
      totals: 0,

      //高级查询所需数据
      keyword: null,

      sels: [],//列表选中列

      searchMasterMsgAuditVisible: false,//接单界面对话框是否显示
      auditFormRules: {
        note: [
          {required: true, message: '请输入备注！', trigger: 'blur'}
        ]
      },
      //接口对话框数据
      auditForm: {
        msgId: null,  //寻主消息的id
        state: 1,  //审核状态
        note: ''  //处理日志
      },
    }
  },
  methods: {
    //1.获取用户列表
    getSearchMasterMsgs() {
      let paras = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      };
      this.listLoading = true;
      this.$http.post("/searchMasterMsg/toAudit", paras).then(res => {
        this.totals = res.data.totals;
        this.searchMasterMsgs = res.data.list;
        this.listLoading = false;
      }).catch(result => {
        this.$message.error("获取分页数据失败!!!");
      })
    },

    //2.高级查询
    keywordQuery() {
      //修改页码
      this.currentPage = 1;
      //改查询条件=双向绑定输入时自动改变，只需要重新查询一次就ok
      this.getSearchMasterMsgs();
    },

    //3.点击某一页的处理
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSearchMasterMsgs();
    },

    //4.删除相关方法
    handleDel: function (row) {
      this.$confirm('确认删除当前数据吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/searchMasterMsg/" + row.id).then(res => {
          if (res.data.success) {//操作成功
            this.$message.success("删除成功");

            //处理当前页
            let totalPage = Math.ceil(this.totals / this.pageSize);
            if (this.currentPage == totalPage && (this.totals - 1) % this.pageSize == 0 && this.currentPage != 1) {
              this.currentPage = this.currentPage - 1;
            }

            this.getSearchMasterMsgs();
          } else {
            this.$message.error("网络繁忙，请稍后重试 - 500")
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("网络繁忙，请稍后重试 - 400,404")
        })
      }).catch(() => {
      });
    },

    //5.选项改变时触发
    selsChange: function (sels) { //sels=被选中的对象组成的数组
      this.sels = sels;//[{id:1,name:'tom'},{id:2,name:'tom'},{id:3,name:'tom'}]
    },

    //6.批量删除方法
    handlePatchDel() {
      this.$confirm('确认删除选中数据吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //获取被删除对象的id
        let ids = this.sels.map(obj => obj.id);//[1,2,3]
        this.$http.patch("/searchMasterMsg/", ids).then(res => {
          if (res.data.success) {//操作成功
            this.$message.success("批量删除成功");

            //删除最后一页的所有数据，并且不是第一页
            let totalPage = Math.ceil(this.totals / this.pageSize);
            if (this.currentPage == totalPage && (this.totals - this.sels.length) % this.pageSize == 0 && this.currentPage != 1) {
              this.currentPage = this.currentPage - 1;
            }

            this.getSearchMasterMsgs();
          } else {
            this.$message.error("网络繁忙，请稍后重试 - 500")
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("网络繁忙，请稍后重试 - 400,404")
        })
      }).catch(() => {
      });
    },

    //7.显示接单界面
    auditSearchMasterMsg: function (index, row) { //寻主消息对象
      //重置审核框
      this.auditForm = {
        msgId: null,  //寻主消息的id
        state: 1,  //审核状态
        note: ''  //处理日志
      },
      this.auditForm.msgId = row.id;
      //显示对话框
      this.searchMasterMsgAuditVisible = true;
    },

    //8.人工审核提交
    auditSubmit(){
      //表单校验：只要有一个表单项校验失败返回false，只有所有表达项校验成功才会返回true
      this.$refs.auditForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交数据吗？', '提示', {}).then(() => {
            this.$http.post("/searchMasterMsg/audit", this.auditForm).then(res => {
              if (res.data.success) {
                this.$message.success("操作成功");
                //重新刷新数据
                this.getSearchMasterMsgs();
              } else {
                this.$message.error("网络繁忙，请稍后重试 - 500");
              }
              this.searchMasterMsgAuditVisible = false;//关闭对话框
            }).catch(res => {
              this.$message.error("网络繁忙，请稍后重试 - 404,400");
            })
          });
        } else {
          this.$message.error("校验失败");
        }
      });
    }

  },
  mounted() {
    this.getSearchMasterMsgs();
  }
}

</script>

<style scoped>

</style>